<template>
	<view>
		<!-- 吸顶 -->
		<u-sticky>
			<!-- 列车信息 -->
			<view class="carDetail">

				<!-- {{trainNumberData.startTime}} -->
				<!-- 开始的地点-时间 日期 -->
				<view class="startInfo trainItem">
					<text class="city">{{trainNumberData.startCity}}</text>
					<text class="time">{{trainNumberData.startTime}}</text>
					<text class="dates">09-09 周五</text>
				</view>
				<!-- 耗时 和 车次、 -->
				<view class="trainnumber trainItem">
					<text>{{trainNumberData.allTimes}}</text>
					<text>时刻表</text>
					<text class="dates">{{trainNumberData.allTimes}}</text>
				</view>
				<!-- 结束时间 地点 日期 -->
				<view class="endInfo trainItem">
					<text class="city">{{trainNumberData.endCity}}</text>
					<text class="time">{{trainNumberData.endTime}}</text>
					<text class="dates">09-09 周五</text>
				</view>
			</view>
		</u-sticky>
		<!-- 坐席 -->
		<uni-list class="seatChoose">
			<uni-list-item>
				<template v-slot:header>
					<text>坐席</text>
				</template>
				<template v-slot:body>
					<text class="sale">二等座 ￥49.6</text>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- 添加乘客表单 -->
		<view class="infoFill" v-if="flag">
			<view class="left" @click="retract">
				<u-icon name="minus-circle" color="red" size="28"></u-icon>
			</view>
			<uni-forms ref="form" :modelValue="formData">
				<uni-forms-item name="username" label="姓名">
					<uni-easyinput v-model="formData.username" type="text" placeholder="乘客姓名" />
				</uni-forms-item>
				<uni-forms-item name="Idcard" label="身份证">
					<uni-easyinput v-model="formData.Idcard" type="text" placeholder="证件号码" />
				</uni-forms-item>
				<!-- <button class="button" @click="submit">校验表单</button> -->
			</uni-forms>
		</view>

		<!-- 按钮 -->
		<uni-list>
			<uni-list-item class="customer">
				<template v-slot:header>
					<u-button type="primary" icon="plus-circle" :plain="true" text="添加成人"
						@click="addCustomer"></u-button>
				</template>
				<template v-slot:body>
					<u-button type="primary" :plain="true" :hairline="false" text="选择乘客"
						@click="chooseCustomer"></u-button>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- 座椅 -->
		<view class="seatchoosee" v-if="flag">
			<uni-list-item>
				<template v-slot:header>
					<text>在线选座</text>
				</template>
			</uni-list-item>
			<view class="seat">
				<view class="seatA" v-for="(item,index) in seatData" :key="index" @click="chooseSeat(item)">
					<text>{{item.title}}</text>
					<img :src="item.image" alt="">
				</view>
			</view>
		</view>

		<!-- 商品导航栏 -->
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @buttonClick="buttonClick" />
		</view>

		<!-- 弹出层 -->
		<uni-popup ref="popup" :mask-click="true" style="z-index: 10;">
			<view class="popInfo">
				<uni-list>
					<uni-list-item :title=trainNumberData.startCity+trainNumberData.endCity
						note="请确认车次信息"></uni-list-item>
					<uni-list-item :title=trainNumberData.startTime note="出发时间"></uni-list-item>
					<uni-list-item :title=formData.username note="乘车人"></uni-list-item>
				</uni-list>
				<text class="checkOrder">{{checkInfo}}</text>
				<progress :percent="percent" show-info stroke-width="3" />
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seatData: [{
						title: "窗户",
						image: ""
					},
					{
						title: "A",
						image: "../../../static/座位.png"
					},
					{
						title: "B",
						image: "../../../static/座位.png"
					},
					{
						title: "C",
						image: "../../../static/座位.png"
					},
					{
							title: "过道",
							image: ""
						},
					{
						title: "D",
						image: "../../../static/座位.png"
					},
					{
						title: "E",
						image: "../../../static/座位.png"
					},
					{
							title: "窗户",
							image: ""
						},
				],
				seatDatas: [{
						title: "窗户",
						image: ""
					},
					{
						title: "A",
						image: "../../../static/座位.png"
					},
					{
						title: "B",
						image: "../../../static/座位.png"
					},
					{
						title: "C",
						image: "../../../static/座位.png"
					},
					{
							title: "过道",
							image: ""
						},
					{
						title: "D",
						image: "../../../static/座位.png"
					},
					{
						title: "E",
						image: "../../../static/座位.png"
					},
					{
							title: "窗户",
							image: ""
						},
				],
				checkInfo: "核验乘客信息成功，占座中...",
				percent: 30,
				// 弹出层
				show: false,

				flag: false,
				formData: {
					username: '',
					Idcard: ''
				},
				rules: {
					// ...
				},
				trainNumberData: {},
				// 商品导航
				options: [{
					icon: 'shop',
					text: '支付金额:￥200',
					// info: 2,
					// infoBackgroundColor: '#007aff',
					// infoColor: "#f5f5f5"
				}, ],
				buttonGroup: [{
					text: '提交订单',
					backgroundColor: 'linear-gradient(90deg, #0D9CBE, #BEB1D2)',
					color: '#fff'
				}, ],
			};
		},
		onLoad(options) {
			// console.log("订单填写页面接受参数", options);
			// 先解密
			let codeString = decodeURIComponent(options.trainDetail)
			// 再转回对象
			let par = JSON.parse(codeString)
			console.log("订单填写页面接受参数", par);
			this.trainNumberData = par
		},
		methods: {
			chooseSeat(item){
				this.seatData = this.seatDatas
				console.log(item);
				let index = this.seatData.findIndex(a=>a.title == item.title)
				console.log(index);
				item.image = "../../../static/已选座位.png"
				item.title = ''
			},
			retract() {
				this.flag = false
			},
			// 提交订单  进度条
			buttonClick(e) {

				// 进度条
				if (this.formData.username == '' || this.formData.Idcard == '') {
					uni.showToast({
						title: "请输入乘客信息",
						icon: 'error'
					})
				} else {
					let timer = setInterval(() => {
						this.open()
						this.percent += 10
						this.trainNumberData.username = this.formData.username
						this.trainNumberData.Idcard = this.formData.Idcard
						if (this.percent == 100) {
							let jsonData = JSON.stringify(this.trainNumberData)
							let codeString = encodeURIComponent(jsonData)
							// uni.navigateTo({
							// 	url: "/pages/toPay/toPay?orderInfo=" + codeString		
							// })
							uni.navigateTo({
								url: `/pages/toPay/toPay?orderInfo=${codeString}&timer=${timer}`
							})
							this.close()
							this.checkInfo = ''
							this.percent = 0
						}
					}, 1000)

				}
			},


			// 添加乘客
			addCustomer() {
				this.flag = !this.flag

			},
			chooseCustomer() {
				uni.navigateTo({
					url: "/pages/XinZen/XinZen"
				})
			},
			submit() {
				// 在 onLoad 生命周期中，formData添加了一个 id 字段 ，此时这个字段是不参数校验的，所以结果中不返回
				// 在 validate(['id']) 方法中，指定第一个参数 ，即可返回id字段
				this.$refs.form.validate(['id'], (err, formData) => {
					if (!err) {
						console.log('success', formData)
					}
				})
			},
			// 弹出层展示和关闭
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},


		}
	}
</script>

<style lang="less">
	.carDetail {
		width: 100%;
		height: 300rpx;
		background-color: aliceblue;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 60rpx;

		.trainItem {
			width: 200rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			line-height: 60rpx;
		}

		.city {
			font-size: 40rpx;
		}

		.time {
			font-size: 40;
			font-weight: 700;
		}

		.dates {
			color: #666;
			font-size: 25rpx;
		}

	}

	// 表单模块样式
	.infoFill {
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 50rpx;
	}

	// 坐席样式
	.sale {
		margin-left: 100rpx;
		color: orange;
	}

	.seatChoose {
		margin-bottom: 100rpx;
	}

	// 选座椅
	.seatchoosee {
		.seat {
			width: 100%;
			height: 150rpx;
			background-color: aliceblue;
			display: flex;
			justify-content: space-around;
			align-items: center;

			text {
				color: #7c7c7c;
			}

			img {
				width: 65rpx;
				height: 65rpx;
			}
		}

		.seatA {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			text {
				position: relative;
				bottom: -40rpx;
				font-size: 14px;
			}
		}
	}

	// 商品导航
	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	// 弹框样式
	.popInfo {
		background-color: #fff;
		width: 500rpx;
		height: 600rpx;
		border-radius: 25rpx 25rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
</style>